<template>
	<div class="goodsinfo-container">
		
		<transition
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>

		<!-- 商品轮播图区 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					
					<swiper :images="images" :isFull="isFull"></swiper>

				</div>
			</div>
		</div>

		<!-- 商品购买区 -->
		<div class="mui-card">
			<div class="mui-card-header">
				<span>{{ newsinfo.name }}</span>
				<span class="score">店铺评分：{{ newsinfo.score }}</span>
			</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价：<del>￥2399</del>&nbsp;&nbsp;销售价：<span class="now_price">￥2199</span>
					</p>
					<p class="num">
						<span>购买数量：</span>
						<span><goodsinfo_numbox @addProduct="addProduct" :max="newsinfo.id"></goodsinfo_numbox></span></p>
					<p>
						<mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" @click="addShopCar">加入购物车</mt-button>
					</p>
				</div>
			</div>
		</div>

		<!-- 商品参数区 -->
		<div class="mui-card">
			<div class="mui-card-header" @click="getScroll">店铺信息</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>库存：{{ newsinfo.id }}</p>
					<p>电话：{{ newsinfo.phone }}</p>
					<p>地址：{{ newsinfo.address }}</p>
					<p>营业时间：{{ newsinfo.businessHours }}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
			</div>
		</div> 

		


		<!-- 评论区 -->
		<comments-box :newsinfo="this.newsinfo"></comments-box>

	</div>
</template>

<script>
	import router from 'vue-router'
	import { Toast } from 'mint-ui';
	import comment from '../subcomponents/comment.vue'
	import swiper from '../subcomponents/swiper.vue'
	import goodsinfo_numbox from '../subcomponents/goodsinfo_numbox.vue'

	export default {
		data(){
			return{
				id:this.$route.params.id,
				images:[],
				newsinfo:{},
				isFull:true,
				ballFlag:false,
				num:1,
				//当前商品在购物车中的数量
				totalNum:0,
			}
		},
		methods:{
			getNewsInfo(){
				//vue-resource的ajax地址不能以“/”开头
				this.$http.get("2/shops?id="+this.id).then((result)=>{					
					if(result.body){
						this.newsinfo = result.body[0];
						this.images = result.body[0].images;

						//初始化 当前商品在购物成中的数量
						this.$store.state.car.some((item)=>{
							if(item.id == this.id){
								this.totalNum = item.count;
								return true
							}
						})
					}else{
						Toast("加载轮播图失败！")
					}
				})
			},
			goDesc(id){
				this.$router.push({path:"/home/goodsdesc/"+id})
			},
			beforeEnter(el){
				el.style.transform="translate(0,0)";				
			},
			enter(el,done){
				el.offsetWidth;

				//小球动画优化思路
				//1.小球的起点是定位在根标签的盒子上的
				//2.当根标签的盒子移动的时候，那么参考点就不准了
				//3.So，需要动态计算小球终点的相对位移

				const ballPosition = this.$refs.ball.getBoundingClientRect();
				const badgePosition = document.getElementById("badge").getBoundingClientRect();

				const left = badgePosition.left - ballPosition.left ;
				const top = badgePosition.top - ballPosition.top ;

				el.style.transform="translate("+left+"px,"+top+"px)";
				el.style.transition="all 1s cubic-bezier(.34,.57,0,1.3)";
				done();
			},
			afterEnter(el){
				this.ballFlag = !this.ballFlag;
			},
			addShopCar(event){

				//判断购物车中的货物是否超过库存  如果超过库存 就退出
				if((parseInt(this.totalNum)+parseInt(this.num))>parseInt(this.newsinfo.id)){
					Toast("没货了！还剩："+(parseInt(this.newsinfo.id)-parseInt(this.totalNum))+"件货")
					return false
				}else{
					//加入购物车后 该商品的数量
					this.totalNum=parseInt(this.totalNum) + parseInt(this.num);
				}

				//拼接出 一个该商品的购物车数据  用来共享到vuex的 store实例中
				var goodsinfo = {
					id: this.id,
					info:this.newsinfo,
					count: this.num,
					selected:true
				}
				this.$store.commit("addToCar",goodsinfo)

				//触发动画的
				this.ballFlag=!this.ballFlag				
				//禁用/启用按钮 让动画完成后才可以继续添加
				event.target.disabled=true;
				setTimeout(()=>{
					event.target.disabled=false;
				},1000)															
			},
			addProduct(num){
				this.num = num ;
				console.log(this.num)
			},
			//测试滚动区用的
			getScroll(){
				var top = document.documentElement.scrollTop
				console.log(top)
			}
		},
		created(){
			this.getNewsInfo();

		},	
		components:{
			"comments-box":comment,
			"swiper":swiper,
			"goodsinfo_numbox":goodsinfo_numbox,
		},
		mounted(){
			//进入页面的时候 在页面的最顶端（不管前一个页面中滚轮到位置）
			document.documentElement.scrollTop = 0 ;
		}

	}
</script>

<style lang="scss" scoped>
	
	.score {
		color:darkorange;
	}
	
	.goodsinfo-container {
		background-color: #eee;
		overflow: hidden;

		.now_price {
			color: red;
			font-size: 16px;
			font-weight: bold;
		}

		.num {
			display: flex;
			span:first-child {
				color:red;
				line-height: 36px;

			}
		}

		.mui-card-footer {
			display: block;

			button {
				margin: 15px 0px;
			}
		}

		.ball {
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			top: 390px;
			left:146px;
			z-index: 99;
		}
		
	}
</style>